<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>二分法求解方程根</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:750px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var tagpoint = [[0,0],[0,0],[0,0]];
        var left = 1.5;
        var right = 2.4;

        function func(x) {
            var a = [-121,274,-225,85,-15,1];
            var ret = 0;
            for(var index=0;index<a.length;++index){
                ret += a[index] * Math.pow(x,index);
            }
            return ret;
            //f(x)=x^5−15x^4+85x^3−225x^2+274^x−121
        }

        function generateData() {
            var data = [];
            for (var i = 1.5; i <= 2.4; i += 0.1) {
                data.push([i, func(i)]);
            }
            return data;
        }

        function generateTagPoint(x1,x2){
            tagpoint = [[x1,func(x1)],[(x1+x2)/2,func((x1+x2)/2)],[x2,func(x2)]];
        }

        generateTagPoint(left,right);

        option = {
            title: {
                text: '《二分法求解方程组的根》    信息安全18-1黄旭'
            },
            animation: false,
            grid: {
                top: 40,
                left: 50,
                right: 40,
                bottom: 50
            },
            xAxis: {
                name: 'x',
                minorTick: {
                    show: true
                },
                splitLine: {
                    lineStyle: {
                        color: '#999'
                    }
                },
                minorSplitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ddd'
                    }
                }
            },
            yAxis: {
                name: 'y',
                min: -100,
                max: 100,
                minorTick: {
                    show: true
                },
                splitLine: {
                    lineStyle: {
                        color: '#999'
                    }
                },
                minorSplitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ddd'
                    }
                }
            },
            dataZoom: [{
                show: true,
                type: 'inside',
                filterMode: 'none',
                xAxisIndex: [0],
                startValue: 1.5,
                endValue: 2.4
            }, {
                show: true,
                type: 'inside',
                filterMode: 'none',
                yAxisIndex: [0],
                startValue: -5,
                endValue: 5
            }],
            series: [
                {
                    type: 'line',
                    clip: true,
                    smooth: true,
                    data: generateData()
                },
                {
                    type: 'scatter',
                    showSymbol: true,
                    //clip: true,
                    smooth: true,
                    symbolSize: 20,
                    data: tagpoint
                }
            ]
        };
        
        myChart.setOption(option);

        function next(){
            var mid = (left+right)/2;
            if(func(mid)>0)left = mid;
            else right = mid;
            generateTagPoint(left,right);
            option["series"][1]["data"] = tagpoint;
            myChart.setOption(option);
            document.getElementById("output").textContent = "当前的X="+mid+",Y="+func(mid);
        }
    </script>
    <div style="text-align: center;">
        <p id="output">请点击下一步，观察三个点的变化</p>
        <button onclick="next()" style="width: 200px;height:60px;">下一步</button>
    </div>
</body>
</html>